<template>
  <base-page>
    <a-form slot="header" layout="inline">
      <a-form-item label="资源名称">
        <a-input v-model.trim="searchParam.name" placeholder="输入资源名称"></a-input>
      </a-form-item>
      <a-form-item label="资源编码">
        <a-input v-model.trim="searchParam.code" placeholder="输入资源编码"></a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" icon="search" @click="search">查询</a-button>
      </a-form-item>
    </a-form>
    <base-table
      ref="resTable"
      url="resource/findAll"
      slot="main"
      :columns="columns"
      :bordered="false"
      :selection="null"
      :searchParam="searchParam"
      :showPagination="false"
      :defaultExpandedRowKeys="[1]"
      :tableBtns="[]"
      :optionBtns="optionBtns"
      @loaded="tableLoaded"
    />
    <a-modal
      slot="dialog"
      title="添加资源"
      v-model="visible"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
    >
      <a-form :form="form">
        <a-form-item label="父菜单" :labelCol="colConfig.labelCol" :wrapperCol="colConfig.wrapperCol">
          <a-tree-select
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            :treeData="treeData"
            placeholder="请选择父级菜单"
            treeDefaultExpandAll
            :allowClear="true"
            v-model="res.parentId"
          />
        </a-form-item>
        <a-form-item label="资源名称" :labelCol="colConfig.labelCol" :wrapperCol="colConfig.wrapperCol">
          <a-input v-model.trim="res.name" placeholder="请输入资源名称"/>
        </a-form-item>
        <a-form-item label="资源编码" :labelCol="colConfig.labelCol" :wrapperCol="colConfig.wrapperCol">
          <a-input v-model.trim="res.code" placeholder="请输入资源编码"/>
        </a-form-item>
        <a-form-item label="资源类型" :labelCol="colConfig.labelCol" :wrapperCol="colConfig.wrapperCol">
          <a-radio-group v-model.trim="res.type">
            <a-radio :value="2">菜单</a-radio>
            <a-radio :value="1">模块</a-radio>
            <a-radio :value="3">按钮</a-radio>
            <a-radio :value="4">其他</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          v-if="res.type == 2"
          label="组件路径"
          :labelCol="colConfig.labelCol"
          :wrapperCol="colConfig.wrapperCol"
        >
          <a-input v-model.trim="res.resPath" placeholder="请输入组件路径"/>
        </a-form-item>
        <a-form-item label="排序号" :labelCol="colConfig.labelCol" :wrapperCol="colConfig.wrapperCol">
          <a-input-number :min="1" v-model.trim="res.sortBy"/>
        </a-form-item>
        <a-form-item label="资源图标" :labelCol="colConfig.labelCol" :wrapperCol="colConfig.wrapperCol">
          <a-input v-model.trim="res.icon" placeholder="请输入资源图标代码"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </base-page>
</template>

<script>
export default {
  data() {
    let me = this;
    return {
      visible: false,
      confirmLoading: false,
      searchParam: {
        name: "",
        code: ""
      },
      res: {
        id: "",
        name: "",
        code: "",
        type: 2,
        parentId: "",
        parentName: "",
        resPath: "",
        sortBy: 1
      },
      colConfig: {
        labelCol: {
          span: 5
        },
        wrapperCol: {
          span: 16
        }
      },
      optionBtns: [
        {
          popover: "子资源",
          icon: "plus",
          code: "add",
          handler(code, record) {
            me.addRes(code, record);
          }
        },
        {
          popover: "编辑",
          icon: "edit",
          code: "edit",
          handler(code, record) {
            me.editRes(code, record);
          }
        },
        {
          popover: "删除",
          icon: "delete",
          code: "delete",
          handler(code, record) {
            me.deleteRes(code, record);
          }
        }
      ],
      columns: [
        { title: "资源名称", dataIndex: "name" },
        { title: "资源ID", dataIndex: "id", width: 120 },
        {
          title: "图标",
          dataIndex: "icon",
          width: 120,
          customRender: (text, record) => {
            return <a-icon type={text} style="font-size:18px;color:#5868d9" />;
          }
        },
        { title: "资源编码", dataIndex: "code", width: 150 },
        {
          title: "资源类型",
          dataIndex: "type",
          width: 120,
          customRender(text, record, index) {
            let str;
            switch (text) {
              case 1:
                str = "模块";
                break;
              case 2:
                str = "菜单";
                break;
            }
            return str;
          }
        },
        {
          title: "排序号",
          dataIndex: "sortBy",
          width: 100
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          width: 150,
          fixed: "right"
        }
      ],
      treeData: []
    };
  },
  watch: {
    "res.type"(newVal) {
      newVal != 2 ? (this.res.resPath = "") : "";
    }
  },
  created() {
    this.form = this.$form.createForm(this, {});
    this.defaultRes = JSON.parse(JSON.stringify(this.$data.res));
    console.log(this.form);
  },
  methods: {
    tableLoaded(data) {
      this.treeData = data;
    },
    search() {
      this.$refs["resTable"].initLoad();
    },
    addRes(code, record) {
      if (this.form) {
        this.res = Object.assign({}, this.defaultRes);
        this.form.resetFields();
      }
      let tempData = Object.assign({}, record);
      this.res.parentId = tempData.id + "";
      this.visible = true;
    },
    editRes(code, record) {
      let tempData = Object.assign({}, record);
      this.res = tempData;
      this.res.parentId = tempData.parentId + "";
      this.visible = true;
    },
    deleteRes(code, data) {
      let me = this;
      me.$confirm({
        title: "操作提示",
        content: "确定要删除选中行数据吗?",
        onOk() {
          me.$http.ajax({
            url: "resource/delete/" + data.id,
            success: res => {
              me.$message.success("删除成功");
              me.search();
            }
          });
        }
      });
    },
    handleOk() {
      let me = this;
      me.confirmLoading = true;
      me.$http.ajax({
        url: "resource/save",
        data: me.res,
        success: res => {
          me.$message.success("保存成功");
          me.confirmLoading = false;
          me.visible = false;
          me.search();
        }
      });
    }
  }
};
</script>

<style>
</style>
